<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { ContentWrap } from '#/components/content-wrap';
import { Calendar, Badge, Select } from 'ant-design-vue';
import type { Dayjs } from 'dayjs';

const resourceType = ref<string>('all');

const resourceTypeOptions = [
  { label: '全部', value: 'all' },
  { label: '婚纱', value: 'dress' },
  { label: '化妆师', value: 'artist' },
  { label: '摄影师', value: 'photographer' },
];

// 示例数据 - 实际应该从API加载
const eventsData = ref<Record<string, Array<{ type: string; name: string }>>>({
  '2025-10-25': [
    { type: 'dress', name: '婚纱A - 张三' },
    { type: 'artist', name: '李化妆师 - 李四' },
  ],
});

const getDateEvents = (date: Dayjs) => {
  const dateStr = date.format('YYYY-MM-DD');
  return eventsData.value[dateStr] || [];
};
</script>

<template>
  <Page auto-content-height>
    <ContentWrap title="档期管理">
      <div class="mb-4">
        <Select 
          v-model:value="resourceType" 
          :options="resourceTypeOptions"
          style="width: 200px"
        />
      </div>
      
      <Calendar :fullscreen="true">
        <template #dateCellRender="{ current }">
          <div class="calendar-events">
            <Badge 
              v-for="(event, index) in getDateEvents(current)"
              :key="index"
              :status="event.type === 'dress' ? 'success' : event.type === 'artist' ? 'processing' : 'warning'"
            >
              <template #text>
                <span class="text-xs">{{ event.name }}</span>
              </template>
            </Badge>
          </div>
        </template>
      </Calendar>
    </ContentWrap>
  </Page>
</template>

<style scoped>
.calendar-events {
  padding: 2px;
}
:deep(.ant-badge-status-text) {
  font-size: 12px;
}
</style>

